<template>
  <div>
    <Card>
      <span slot="title"> 商品添加 </span>
      <div slot="title1">
        <!-- 表单 -->
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="商品名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="商品分类" >
            <el-select v-model="form.region"    placeholder="请选择商品分类">
              <el-option v-for="(item,i) in xuanran" :key="i" :label="item.cateName" :value="item.cateName"></el-option>
             
            </el-select>
          </el-form-item>
          <!-- 计时器 -->
                    <el-form-item label="商品价格" >
   <el-input-number
            v-model="num"
            @change="handleChange"
            :min="1"
            label="描述文字"
          ></el-input-number>
          </el-form-item>
       
          <!-- 图像上传框 -->

          <el-form-item label="商品图片">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:5000/goods/goods_img_upload"
              :show-file-list="false"
              
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="urimg+ imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>


          <el-form-item label="商品描述">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
                    <el-form-item >
            <el-button @click="tianjia" type="primary" > 添加商品</el-button>
          </el-form-item>
        </el-form>
      </div>
    </Card>
  </div>
</template>

<script>
import {apishopcx_js ,apigoodssc_js ,apigoodstj_js ,apigoodshq_js} from "@/utils/api.js"
import Card from "@/components/Card.vue";
export default {
  components: {
    Card,
  },
  data() {
    return {
      //网址
      urimg:"http://127.0.0.1:5000/upload/imgs/goods_img/",
      //图像上传
      imageUrl:"",
      form: {
        name: "",
        desc: "",
        //选择类别
        region: "",
      },
      xuanran:{
        cateName:''
      },
      //计时器
      num:1,
    };
  },
  methods:{
    //图像上传成功的钩子
    handleAvatarSuccess(file){
      //结构   拿到图片的每个值
      let {code,imgUrl,msg}=file;
      this.imageUrl = imgUrl
      if (code === 0) {
           this.imageUrl =  imgUrl;
        this.$message({
          type: "success",
          message: msg,
          //成功之后再把图片渲染到页面
          
        });
        
      } else {
        this.$message.error(msg);
      }
      console.log(this.imageUrl)
 
    },
    //图像上传之前的的钩子
    async beforeAvatarUpload(file){
      
      //在这里发送图片
//       let res = await apigoodssc_js({
//         file:this.imageUrl
//         // code	状态码，0代表成功，1代表失败 5001参数错误
// // msg	提示信息
// // imgUrl	上传图片名 如: xxx.jpg

//       })
    },
    //计时器改变
    handleChange(){},

    //点击添加发送接口
    async tianjia(){
      let res = await apigoodstj_js({
        name:this.form.name,
        category:this.form.region,
        price:this.num,
        imgUrl:this.imageUrl,
        goodsDesc:this.form.desc,
      })
      console.log(res);
      console.log(this.form.region);
    }
  },
  //加载之前发送ajax
  async created(){
     let res = await apishopcx_js()
     //把这个值渲染上去
     //categories.cateName = this.form.region
     this.xuanran = res.categories
     console.log(res);
   console.log(this.xuanran);
  }
  
  
  
};
</script>

<style lang="less" scoped>
//头像框样式
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>